Add Open Graph Images for Social Media Sharing

Summary

Implemented comprehensive Open Graph (OG) image system with 22 custom branded images across 174 documentation pages to enhance social media sharing with beautiful, branded previews on platforms like Twitter, Facebook, LinkedIn, Discord, and Slack.

Why This Matters

Before: Links shared on social media showed no preview or generic fallback
After: Every documentation page shows a beautiful, branded preview with:

• Tolgee branding and logo
• Category-specific badges (e.g., "REACT", "NEXT.JS", "DOCKER")
• Consistent visual identity
• Professional appearance

This improves:

• ✅ Brand consistency across all platforms
• ✅ Click-through rates from shared links
• ✅ Professional appearance
• ✅ User experience when discovering documentation
• ✅ SEO and social media optimization

What Changed

🎨 New OG Images (22 total)

Core Documentation:

• homepage.png - Default fallback
• platform.png - Platform docs
• js-sdk.png - JavaScript SDK
• android-sdk.png - Android SDK
• ios-sdk.png - iOS SDK
• cli.png - Tolgee CLI
• api.png - REST API

Framework Integrations:

• react.png - React
• react-native.png - React Native
• vue.png - Vue.js
• angular.png - Angular
• svelte.png - Svelte
• next.png - Next.js
• vanilla.png - Vanilla JS
• i18next.png - i18next

Platform Features:

• integrations.png - Third-party integrations
• self-hosting.png - Self-hosting guides
• in-context.png - In-context translation
• machine-translation.png - AI translation
• figma-plugin.png - Figma plugin
• slack.png - Slack integration
• unreal.png - Unreal Engine plugin

📄 Pages Updated (174 pages - 100% coverage)

• Platform: 68 pages (getting started, self-hosting, translation process, projects, SSO, formats, integrations)
• JavaScript SDK: 62 pages (all frameworks, API docs, integrations)
• Android SDK: 9 pages (core + Jetpack Compose)
• iOS SDK: 5 pages (complete coverage)
• CLI: 10 pages (core + extraction docs)

🛠️ Technical Implementation

Configuration:

• Added global default OG image in docusaurus.config.ts
• Removed conflicting hardcoded meta tag from LayoutContent.tsx
• Added image: field to frontmatter of 174 documentation pages

Image Specifications:

• Format: PNG (1200x630px)
• Design: Pink-to-magenta gradient (#EC407A → #D81B60)
• Features: Tolgee logo, category badges, branded borders
• File size: 71-80KB per image

Automation Scripts:

• scripts/generateOgImages.ts - Generates SVG templates from config
• scripts/convertOgImages.ts - Converts SVG to PNG with proper color rendering
• NPM scripts: npm run generate-og-images, npm run convert-og-images, npm run og-images

Testing

After deployment, verify OG images with:

• Facebook Sharing Debugger
• Twitter Card Validator
• LinkedIn Post Inspector
• Discord/Slack (manual share test)